<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用ajax+javaScript实现对xml的接受和处理</title>
    <script type="text/javascript">
        function f1(){
            //ajax请求xml信息回来
            //javascript的dom技术处理xml
            //document xmldocument
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 ){
                    //[object XMLDocument] 其实是xml根结点的父节点对象
                    //alert(xhr.responseXML);
                    var xmldom = xhr.responseXML;

                    //console.log(xmldom.firstChild);<weather>
                    var citys = xmldom.getElementsByTagName('city');

                    //citys[1] //第二个city的元素节点对象
                    /*for(var k in citysp[1]){//k代表元素节点的成员名称
                        //有输出其中一个成员方法：getElementsByTagName
                        //结论：document对象 和 普通元素都可以调用getElementdByTagName函数
                        console.log(k);
                    }*/
                    var str ="";
                    for(var i=0; i<citys.length; i++){
                        var nm = citys[i].getElementsByTagName('name')[0].firstChild.nodeValue;
                        var temp = citys[i].getElementsByTagName('temp')[0].firstChild.nodeValue;
                        var wind = citys[i].getElementsByTagName('wind')[0].firstChild.nodeValue;
                        str += "城市：" +nm+ "--温度："+temp+"--风向："+wind+"<br/>";
                    }
                    document.getElementById('result').innerHTML =str;
                }
            }
            xhr.open('get','./test01.xml');
            xhr.send(null);
        }
    </script>
</head>
<body>
    <h2>利用ajax+javaScript实现对xml的接受和处理</h2>
    <input type="button" value="触发" onclick="f1()">
    <div id="result"></div>
</body>
</html>